// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';

class Counter extends React.Component{
  constructor(props) {
    super(props);
    this.state = {number: 0};

    console.log('1 Counter constructor');
  }

  componentWillMount(){
    console.log('2 Counter componentWillMount');
  }

  componentDidMount(){
    console.log('4 Counter componentDidMount');
  }

  handleClick=(event)=>{
    this.setState({number: this.state.number + 1})
  }

  render(){
    console.log('3 Counter render --- 重新计算新的虚拟dom');

    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }

  shouldComponentUpdate(nextProps,nextState){
    console.log('5 Counter shouldComponentUpdate');
    return nextState.number % 2 === 0;
  }

  componentWillUpdate(){
    console.log('6 Counter componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('7 Counter componentDidUpdate');
  }
}

ReactDOM.render((
  <Counter name={'计数器'}/>
), document.getElementById('root'));
